<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg环形进度条</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1>svg 环形进度条</h1>
    <h2>基于css3的svg环形进度条</h2>
    <div id="cont" data-pct="0">
        <svg id="svg" width='200' height='200' viewPort='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000.svg'>
            <circle cx="100" cy="100" r="90" fill='transparent'></circle>
            <circle id="bar" cx="100" cy="100" r="90" fill="transparent"></circle>
        </svg>
    </div>
    <label for="percent">输入百分比值</label>
    <input type="number" name="percent" id="percent" min="0" max="100">
<script src="./index.js"></script>
</body>
</html>